<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header::common_header(~{::title},~{::link},~{})">
    <title>登录界面</title>
    <link rel="stylesheet" href="/css/signin.css" type="text/css">
</head>
<body>
<!--<div class="container">
    <form class="form-signin" method="post" action="/api/login" >
        <h2 class="form-signin-heading a_input">Please sign in</h2>
        <br>
        <label for="inputUser" class="sr-only">User Id</label>
        <input type="text" id="inputUser" name="userId" class="form-control a_input" th:placeholder="请输入账户ID" placeholder="User name" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" name="password" class="form-control a_input" th:placeholder="请输入密码" placeholder="Password" required>
        <div class="a_reg"><a th:href="@{/toRegister}" th:text="注册" ></a></div>
        <button class="btn btn-lg btn-primary btn-block a_input" type="submit">登录</button>
        <p style="color: red; margin-left: 5px" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
    </form>
</div>-->

<div style="float: left;padding-left:20px;width: 400px;height:500px;">
    <p> 本项目旨在通过传感器对住宅内环境进行监测，与用户客户端实现关联。从而达到家居智能化的目的。可实现的功能包含：
    </p>
    <p style="color: cornflowerblue"> 1、通过温湿度传感器等传感器采集室内温湿度等信息呈现到用户手机客户端上；
    </p>
    <p style="color: cornflowerblue"> 2、用户通过手机客户端可以远程控制室内灯、风扇等家居的开启与关闭；
    </p>
    <p style="color: cornflowerblue"> 3、对敏感气体进行实时性安全监控，若有隐患，能够立刻做出判断以及及时提醒用户；
    </p>
    <p style="color: cornflowerblue"> 4、带门禁系统，通过RFID实现对住宅成员进出进行身份识别以及存储卡内信息（哪张卡开的门），并且用户可以自行操作新增删除卡。
    </p>

</div>

<!--前后端分离-->
<div class="container">

    <form class="form-signin">
        <h2 class="form-signin-heading a_input">Please sign in</h2>
        <br>
        <label for="inputUser" class="sr-only">User Id</label>
        <input type="text" id="inputUser" name="userId" class="form-control a_input" th:placeholder="请输入账户ID"
               placeholder="User name" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" name="password" class="form-control a_input"
               th:placeholder="请输入密码"
               placeholder="Password" required>
        <div class="a_reg"><a th:href="@{/toRegister}" th:text="注册"></a></div>
        <button class="btn btn-lg btn-primary btn-block a_input" type="button" id="btn" onclick="login()">登录
        </button>
        <p style="color: red; margin-left: 5px" id="msg"></p>
    </form>
</div>


</body>
</html>


<script type="text/javascript">
    function login() {
        var userId = $("#inputUser").val();
        var password = $("#inputPassword").val();
        $.get(
            "/api/login" +
            "?userId=" + userId + "&password=" + password,
            function (data) {
                if (data.code == "201") {
                    //alert(data.code+":"+data.message);
                    window.location.href = "/index"
                } else {
                    //alert(data.code+":"+data.message);
                    document.getElementById("msg").innerHTML = data.message;
                }
            })
    }
</script>
